<template>
	<div class="uplaod-image-wrap full box relative bg-primary flex-col p-safe">
		<div class="w-wrap">
			<div class="w-inner">
				<scroll-view scroll-y="true" class="full">
					<div class="image-picker-box">
						<div class="file-wrap">
							<div class="file-title">
								<span>上传图片</span>
							</div>
							<div class="file-list">
								<div class="file-item" v-for="(item,index) in list" :key="index"
									@click="handlePreviewImage(index)">
									<image :src="item" mode="aspectFill" />
									<div class="delete-icon" @click.stop="handleDeleteImage(index)">
										<u-icon color="#666" name="close-circle-fill" size="44rpx" />
									</div>
								</div>
								<div class="file-btn" @click="handleChooseImage">
									<image mode="aspectFill" src="/static/images/add_img.png" class="add-icon"></image>
								</div>
							</div>
						</div>
						<div class="upload-tip">
							<span>请确保照片不得有遮挡，保持字迹清晰</span>
						</div>
					</div>
				</scroll-view>
			</div>
		</div>
		<div class="footer-wrapper p-safe">
			<u-button @click="handleConfirm" type="primary" shape="circle">确定</u-button>
		</div>
	</div>
</template>

<script>
	import { useConcurrence, uploadFile, request, showLoading, toast } from "@/utils/tool.js"
	export default {
		data() {
			return {
				id: "",
				list: [],
			}
		},
		onLoad(ev) {
			const { id } = ev
			if (!id) return
			this.id = id
			this.initData(id)
		},
		methods: {
			async initData(id) {
				const hide = showLoading("正在获取")
				const resp = await request({
					url: "/fangyuan/detail",
					method: "GET",
					data: { id }
				}).catch(hide)
				hide()
				const data = resp.data || {}
				const { images, biaoqian_arr } = data
				this.list = (images || []).filter(Boolean)
			},
			async handleConfirm() {
				const { list, id } = this
				if (!list.length) return toast("请上传房源图片")
				const hide = showLoading("正在上传")
				const resp = await request({
					url: "/fangyuan/shangchuan",
					data: { id, images: list.toString() }
				}).catch(hide)
				hide()
				if (resp.code !== 1) return
				toast({ title: "保存成功", icon: "success" })
				uni.$emit("uploadRoomImageSuccess")
				uni.navigateBack()
			},
			handlePreviewImage(index) {
				if (!this.list.length) return
				uni.previewImage({
					urls: this.list,
					current: index
				})
			},
			handleDeleteImage(index) {
				this.list.splice(index, 1)
			},
			handleChooseImage() {
				uni.chooseImage({
					success: async res => {
						const files = res.tempFilePaths
						if (!files.length) return
						const hide = showLoading("正在上传")
						const uploadResp = await useConcurrence({
							options: files.map(item => ({ payload: [item, false] })),
							reqFunc: uploadFile,
						}).catch(hide)
						hide()
						const list = uploadResp.filter(([error]) => !error).map(([_, result]) =>
							result.uri)
						if (list.length) this.list.push(...list)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uplaod-image-wrap {
		.footer-wrapper {
			padding-left: 32rpx;
			padding-right: 32rpx;
			margin-bottom: 24rpx;
		}

		.image-picker-box {
			padding: 36rpx 32rpx 0;
			box-sizing: border-box;

			.upload-tip {
				padding: 16rpx 28rpx 0;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
				line-height: 44rpx;
			}

			.file-wrap {
				border-radius: 4rpx;
				padding: 24rpx 32rpx;
				background: #fff;

				.file-list {
					margin-top: 24rpx;
					display: flex;
					flex-flow: row wrap;
					gap: 24rpx 32rpx;

					.file-item {
						width: 180rpx;
						height: 180rpx;
						background: #f1f1f1;
						position: relative;

						.delete-icon {
							position: absolute;
							right: -10rpx;
							top: -12rpx;
							z-index: 999;
						}

						image {
							width: 100%;
							height: 100%;
						}
					}

					.file-btn {
						width: 180rpx;
						height: 180rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #F3F3F3;

						.add-icon {
							width: 48rpx;
							height: 48rpx;

						}
					}
				}

				.file-title {
					font-size: 32rpx;
					color: #1D2129;
					line-height: 48rpx;
				}
			}
		}
	}
</style>